<template>
  <div class="bbx-normal-page-content">
    <div class="common-list-container__v2">
      <!-- 门户数据 -->
        <title-card :title="$t('portal.dataBoard.doorData')">
            <div class="portal_data_view">
                <div class="portal_data">
                    <h4>
                      <i class="iconfont icon-leixing"></i>
                      <span class="grey">{{$t('portal.dataBoard.doorTypeCount')}}</span>
                    </h4>
                    <div class="num_div">{{ countGather.doorTypeCount || 0 }}</div>
                </div>
                <div class="portal_data">
                    <h4>
                      <i class="iconfont icon-leixing"></i>
                      <span class="grey">{{$t('portal.dataBoard.accumulatedViews')}}</span>
                    </h4>
                    <div class="num_div">{{ countGather.accumulatedViews || 0 }}</div>
                    <div class="today_num">
                      <span class="grey">{{$t('portal.dataBoard.accumulatedViewsTodayNew')}}</span>
                      <span class="num">{{ countGather.accumulatedViewsTodayNew || 0 }}</span>
                    </div>
                </div>
                <div class="portal_data">
                  <h4>
                    <i class="iconfont icon-leixing"></i>
                      <span class="grey">{{$t('portal.dataBoard.accumulatedLoginQuantity')}}</span>
                  </h4>
                  <div class="num_div">{{ countGather.accumulatedLoginQuantity || 0 }}</div>
                  <div class="today_num">
                    <span class="grey">{{$t('portal.dataBoard.accumulatedViewsTodayNew')}}</span>
                    <span class="num">{{ countGather.accumulatedLoginQuantityTodayNew || 0 }}</span>
                  </div>
                </div>
                <div class="portal_data">
                  <h4>
                    <i class="iconfont icon-leixing"></i>
                    <span class="grey">{{$t('portal.dataBoard.accumulatedUserQuantity')}}</span>
                  </h4>
                  <div class="num_div">{{ countGather.accumulatedUserQuantity || 0 }}</div>
                  <div class="today_num">
                    <span class="grey">{{$t('portal.dataBoard.accumulatedViewsTodayNew')}}</span>
                    <span class="num">{{ countGather.accumulatedUserQuantityTodayNew || 0 }}</span>
                  </div>
                </div>
                <div class="portal_data">
                  <h4>
                    <i class="iconfont icon-leixing"></i>
                    <span class="grey">{{$t('portal.dataBoard.briskUserQuantity')}}</span>
                    <el-tooltip :content="$t('portal.dataBoard.tooltip1')">
                      <i class="iconfont icon-info-circle"></i>
                    </el-tooltip>
                  </h4>
                  <div class="num_div">{{ countGather.briskUserQuantity || 0 }}</div>
                  <div class="today_num">
                    <span class="grey">{{$t('portal.dataBoard.accumulatedViewsTodayNew')}}</span>
                    <span class="num">{{ countGather.briskUserQuantityTodayNew || 0 }}</span>
                  </div>
                </div>
            </div>
        </title-card>
        <!-- 筛选 -->
        <div class="stats-panel ui_search_view">
          <div class="stats-panel-head">
            <div class="stats-form-group">
              <label>{{$t('portal.dataBoard.statisticalPortal')}}</label>
              <el-select v-model="params.doorId" :placeholder="$t('common.base.all')" clearable @change="changeDoor" @clear="clearDoor()">
                <el-option
                  v-for="item in doorList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="stats-form-group">
              <label>{{$t('portal.dataBoard.statisticalTime')}}</label>
                <el-date-picker
                  v-model="pickerArry"
                  :default-value="pickerDefaultValue"
                  type="daterange"
                  :range-separator="$t('common.base.to')"
                  value-format="timestamp"
                  :start-placeholder="$t('common.base.plaeseStartTime')"
                  :end-placeholder="$t('common.base.pleaseEndTime')"
                  :picker-options="pickerOptions"
                  @change="updateData()">
                </el-date-picker>
            </div>
            </div>
        </div>
        <div class="ui_bulletin_board_view">
          <!-- 门户趋势统计 -->
          <div class="ui_bulletin_board_left echarts_box_view">
            <title-card :title="$t('portal.dataBoard.trendStatistical')">
              <PortalEcharts :list="DoorTrendList" @change="changeQueryType($event)" />
          </title-card>
          </div>
          <!-- 用户信息TOP -->
          <div class="ui_bulletin_board_right user_info_statistics_div">
            <title-card :title="$t('portal.dataBoard.userInfoTOP')">
              <UserInfoStatistics :data="userList" @change="getUserInfoStatistics($event)" />
          </title-card>
          </div>
        </div>
        <div class="ui_bulletin_board_view">
          <!-- 来源渠道统计 -->
          <div class="ui_bulletin_board_left source_box_view">
            <title-card :title="$t('portal.dataBoard.sourceStatistical')">
              <source-echarts :data="sourceList"></source-echarts>
          </title-card>
          </div>
          <!-- 页面浏览统计 -->
          <div class="ui_bulletin_board_right page_views_sum_view">
            <title-card :title="$t('portal.dataBoard.pageViewsStatistical')">
              <PageviewsSum :list="pageViewsList" />
          </title-card>
          </div>
        </div>
        <!-- 用户登录明细 -->
        <div class="ui_bulletin_board_view">
          <title-card :title="$t('portal.dataBoard.userLoginList')">
            <LoginTable v-if="isRouterAlive" :params="params" @reset="resetTable()" />
          </title-card>
        </div>
    </div>
  </div>
</template>

<script>
// components
import TitleCard from './components/TitleCard';
import PortalEcharts from './components/PortalEcharts';
import UserInfoStatistics from './components/UserInfoStatistics';
import SourceEcharts from './components/SourceEcharts';
import PageviewsSum from './components/PageviewsSum';
import LoginTable from './components/LoginTable';
// API
import { queryDoorDateTop, getDoorTypeList, userAreaStatistics, userInfoStatistics, doorTrendStatistics, sourceChannelStatistics, pageViews, loginRecordPage } from '@src/api/PortalApi';

import { useTenantId } from '@hooks/useRootWindow.ts'
import { Message } from 'element-ui';
import Platform from '@src/util/platform.ts';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'


const tenantId = useTenantId().value;
export default {
  name: 'portal-data-page',
  components: {
    TitleCard,
    PortalEcharts,
    UserInfoStatistics,
    SourceEcharts,
    PageviewsSum,
    LoginTable
  },
  data() {
    return {
      countGather: {},
      doorList: [],
      value: '',
      pickerDefaultValue: null,
      pickerArry: [],
      pickerOptions: {
        disabledDate(time) {
            return time.getTime() > Date.now(); 
        }
      },
      params: {
        doorId: null,
      },
      doorTrendQueryType: 'VIEWS_QUANTITY',
      DoorTrendList: [],
      userList: [],
      sourceList: {},
      pageViewsList: [],
      loginRecorList: {},
      isRouterAlive: true,
    }
  },
  filters: {
  },
  mounted() {
    this.pickerArry = this.weekDate()
    this.getProtalData()
    this.doorTypeList()
    this.updateData()
  },
  methods: {
    fastTab() {
      Platform.openAccurateTab({
        type:PageRoutesTypeEnum.PagePortal
      });
    },
    weekDate() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start.getTime(), end.getTime()]
    },
    // 门户数据
    getProtalData() {
      queryDoorDateTop().then(res => {
        if(res.success && res.code == '200') {
          this.countGather = res.data
        }
      }).catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    // 门户列表
    doorTypeList() {
      getDoorTypeList({ tenantId: tenantId.value })
        .then(result => {
          if (!result.success) {
            return Message.error(result.message);
          }
          this.doorList = result.data;
        })
        .catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    changeDoor(e) {
      this.params.doorId = e
      this.updateData()
    },
    clearDoor() {
      delete this.params.doorId
      this.updateData()
    },
    // 获取用户信息统计
    getUserInfoStatistics(type = 'Area') {
      let params = {
        sortType: 1,
        sequence: 'desc',
        ...this.params
      }
      let url = type == 'Area' ? userAreaStatistics(params) : userInfoStatistics(params)
      url.then(result => {
          if (!result.success) {
            return Message.error(result.message);
          }
          this.userList = result.data;
        })
        .catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    // 获取门户趋势统计
    getDoorTrendStatistics(params) {
      doorTrendStatistics(params)
        .then(result => {
          if (!result.success) {
            return Message.error(result.message);
          }
          this.DoorTrendList = result.data;
        })
        .catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    // 获取来源渠道统计
    getSourceData() {
      sourceChannelStatistics({
        timeStartL: this.params.timeStartL,
        timeEndL: this.params.timeEndL
      })
        .then(result => {
          if (!result.success) {
            return Message.error(result.message);
          }
          this.sourceList = result.data;
        })
        .catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    // 页面浏览统计
    getPageViews() {
      pageViews(this.params)
      .then(result => {
          if (!result.success) {
            return Message.error(result.message);
          }
          this.pageViewsList = result.data;
        })
        .catch(error => {
          console.warn(error);
          Message.error(this.$t('common.base.tip.systemIsError'));
        });
    },
    updateData() {
      this.params.timeStartL = this.pickerArry[0]
      this.params.timeEndL = this.pickerArry[1]
      this.getUserInfoStatistics()
      this.getDoorTrendStatistics({queryType: this.doorTrendQueryType, ...this.params})
      this.getSourceData()
      this.getPageViews()
    },
    changeQueryType(type) {
      this.doorTrendQueryType = type
      this.getDoorTrendStatistics({queryType: type, ...this.params})
    },
    resetTable() {
      this.isRouterAlive = false
      this.$nextTick(() => {
          this.isRouterAlive = true
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.portal_data_view{
  padding: 0 4px 4px 16px;
  min-height: 110px;
  display: flex;
  .portal_data{
    width: 25%;
    padding: 16px;
    position: relative;
    margin-right: 12px;
    &::after{
      content: "";
      position: absolute;
      width: 1px;
      height: 82px;
      background: #F0F0F0;
      display: block;
      top: 16px;
      left: 0;
      bottom: 16px;
    }
    &:first-child::after{
      display: none;
    }
    &:hover{
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.04);
    }
  }
  .grey{
    opacity: 0.65;
  }
  h4{
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    display: flex;
    span{
      margin: 0 8px;
    }
    .icon-leixing{
      color: #52C41A;
      font-size: 20px;
    }
  }
  .num_div{
    font-size: 24px;
    font-family: HelveticaNeue;
  }
  .today_num{
    line-height: 22px;
    font-size: 12px;
    .num{
      color: #52C41A;
      margin: 0 2px;
      font-family: Helvetica;
    }
    .grey{
      color: #8C8C8C;
    }
    .icon-info-circle{font-size: 14px}
  }
}
.ui_search_view{
  margin-right: 0;
  .stats-panel-head{
    display: flex;
    line-height: 32px;
    p{
      margin: 0;
    }
  }
  .stats-form-group{
    display: flex;
    margin-left: 10px;
    label {
      width: 70px;
    }
  }
}
.ui_bulletin_board_view{
  display: flex;
  .ui_bulletin_board_left{
    margin-right: 12px;
  }
  .echarts_box_view{
    flex: 1;
  }
  .user_info_statistics_div{
    width: 500px;
  }
  .source_box_view{
    width: 500px;
  }
  .page_views_sum_view{
    flex: 1;
    height: 100%;
  }
}
</style>
